<script setup lang='ts'>
import { ref } from 'vue'

const edit = ref()
</script>

<template>
  <view class="form">
  <view class="form-item">
    <span class="label">机器编号</span>
    <input placeholder="10082736"/>
  </view>
  <view class="form-item">
    <span class="label">广告显示</span>
    <view class="arrow">
      <span>全部</span>
      <image src="/static/image/form/right_arrow.png" mode="widthFix" />
    </view>
  </view>
</view>
  <view class="action">
    <button class="btn large primary">查询</button>
  </view>
  <view class="outer">
    <view class="list">
      <view class="card">
        <view class="header">
          <view class="name">设备编号：100068</view>
        </view>
        <view class="body">
          <p class="code">取货码：KKDWH173778</p>
          <p>创建人：夜阑静（13574234567）<span class="view-pic">查看图片</span></p>
          <p>广告显示：安卓</p>
          <p>广告类型：头部广告</p>
          <p>屏幕方向：竖屏 <button class="btn" @click="edit?.open">编辑</button></p>
          <p>创建时间：2024-06-21 15:56</p>
          <view>
            <p>广告图片：</p>
            <view class="images">
              <image mode="aspectFit" class="icon" src="/static/image/home/bg.png" />
              <image mode="aspectFit" class="icon" src="/static/image/home/bg.png" />
            </view>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="header">
          <view class="name">设备编号：100068</view>
        </view>
        <view class="body">
          <p class="code">取货码：KKDWH173778</p>
          <p>创建人：夜阑静（13574234567）<span class="view-pic">查看图片</span></p>
          <p>广告显示：安卓</p>
          <p>广告类型：头部广告</p>
          <p>屏幕方向：竖屏 <button class="btn">编辑</button></p>
          <p>创建时间：2024-06-21 15:56</p>
          <view>
            <p>广告图片：</p>
            <view class="images">
              <image mode="aspectFit" class="icon" src="/static/image/home/bg.png" />
              <image mode="aspectFit" class="icon" src="/static/image/home/bg.png" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <uni-popup ref="edit" type="dialog">
    <uni-popup-dialog type="info" title="编辑广告" confirm-text="确定" cancel-text="取消" style="width: 550rpx">
      <view class="dialog-form">
        <view class="dialog-form-item">
          <span class="label">广告显示</span>
          <view class="arrow">
            <span>安卓</span>
            <image src="/static/image/form/right_arrow.png" mode="widthFix" />
          </view>
        </view>
        <view class="dialog-form-item">
          <span class="label">广告类型</span>
          <view class="arrow">
            <span>头部广告</span>
            <image src="/static/image/form/right_arrow.png" mode="widthFix" />
          </view>
        </view>
        <view class="dialog-form-item">
          <span class="label">屏幕方向</span>
          <view class="arrow">
            <span>横屏</span>
            <image src="/static/image/form/right_arrow.png" mode="widthFix" />
          </view>
        </view>
        <view class="dialog-form-item upload">
          <span class="label">屏幕方向</span>
          <view class="files">
            <view class="file">
              <image class="icon" src="/static/image/user/id.png" mode="widthFix"/>
              <p>点击上传图片</p>
            </view>
            <view class="file">
              <image class="icon" src="/static/image/user/id.png" mode="widthFix"/>
              <p>点击上传图片</p>
            </view>
          </view>
          <view class="file-tip">
            暂不支持GIF图片，每台机器最多添加6张图片建议尺
            寸（宽高）500*900px
          </view>
        </view>
      </view>
    </uni-popup-dialog>
  </uni-popup>
</template>

<style scoped lang='scss'>
.action {
  width: 90%;
  margin: 44rpx auto;
  .btn {
    width: 100%;
  }
}
.card {
  background: #FFFFFF;
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  border-radius: 8rpx 8rpx 0 0;
  margin: 24rpx 30rpx;
  .header {
    box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
    padding: 22rpx 0;
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 28rpx;
      font-weight: bold;
      position: relative;
      margin-left: 26rpx;
      &:before {
        content: '';
        width: 6rpx;
        height: 40rpx;
        position: absolute;
        left: -26rpx;
        background: #FF4638;
        border-radius: 3rpx 3rpx 3rpx 3rpx;
      }
    }
    .status {
      color: #FF9832;
      font-size: 28rpx;
      margin-right: 30rpx;
    }
  }
  .body {
    padding: 32rpx 34rpx;
    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EBEEF1;
    font-size: 24rpx;
    color: #303030;
    .code {
      color: #FF9832;
    }
    p {
      display: flex;
      line-height: 24rpx;
      margin-bottom: 20rpx;
      font-weight: bold;
      align-items: center;
      justify-content: space-between;
    }
    .view-pic {
      color: #FF9832;
    }
    .btn {
      border: 2rpx solid #FF9832;
      color: #FF9832;
      height: 48rpx;
      padding: 6rpx 18rpx;
    }
    .images {
      uni-image {
        width: 290rpx;
        height: 130rpx;
      }
    }
  }
}
.label {
  text-align: left!important;
}
</style>